<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back();"></div>
      <div class="name">{{details.title}}</div>
      <span class="down-icon"></span>
    </div>


    <div class="details">
    	<div class="layout1-box book-details">
          <img :src="details.cover ? details.cover : errorBookDefaultImg" :onerror="errorBookDefaultImg" class="item-l">
          <div class="item-r">
              <h3 class="item-tt">{{details.title}}</h3>
              <p class="item-desc">作者：{{details.author}}</p>
              <p class="item-desc item-source">来源：{{details.author}}</p>
              <p class="item-info">
                <span class="label">
                  <i class="green">已完结</i>
                  <i class="blue">男频</i>
                </span>
              </p>
          </div>
        </div>

        <div class="book-state">
        	<span class="txt-num">{{details.words_number}}</span>
        	<span class="view-num">{{details.read_number}}</span>
        	<span class="fraction">{{details.score}}分</span>
        </div>

        <div class="book-desc" :class="{'active' : viewMore}">
        	<span>简介：</span>{{details.intro}}
        	<span class="more-btn" @click="viewMoreToggle();" v-show="!viewMore"></span>
        </div>

        <div class="book-list r-icon1">
        	<span class="list-icon">目录</span>
        	<router-link :to="{path:'/readbook/'+details.id}">更新至：第一千章</router-link>
        </div>

        <div class="recommend">
        	<h3>精彩推荐</h3>
        	<router-link :to="{path:'/bookdetails/'+item.id}" @click.native="flushCom()" v-for="item in recommendList">
        		<div class="layout1-box">
	              <img :src="item.cover ? item.cover : errorBookDefaultImg" :onerror="errorBookDefaultImg" class="item-l">
	              <div class="item-r">
	                  <h3 class="item-tt">{{item.title}}</h3>
	                  <p class="item-desc">{{item.intro}}</p>
	                  <p class="item-info">
	                    <span>{{item.author}}</span>
	                    <span class="label">
	                      <i class="blue" v-for="label in item.label">{{label}}</i>
	                      <i class="green">标签</i>
	                    </span>
	                  </p>
	              </div>
	            </div>
        	</router-link>
        </div>
    </div>


    <div class="f-book-btn">
    	<span @click="joinBookshelf()">{{details.is_collect ? '移除书架' : '加入书架'}}</span>
    	<router-link :to="{path:'/readbook/'+details.id}">转码阅读</router-link>
    </div>
  </div>
</template>
<script>
		import bookDefaultImg from '@/assets/images/book.png';
    export default {
    	name: 'bookdetails',
    	components: {

	    },
    	data () {
      		return {
      			recommendList:[],
      			details:{},
						viewMore:false,
						errorBookDefaultImg:'this.src="' + bookDefaultImg + '"',
	      	}
	    },
	    created(){
			this.$axios.get(this.$store.state.url+"guess_like?device_sn="+this.$store.state.device).then(res=>{
		    	console.log(res.data);
		    	this.recommendList = res.data.list;
		    });

		    this.$axios.post(
      			this.$store.state.url+"novel_info?device_sn="+this.$store.state.device,
      			{device_sn:this.$store.state.device,id:this.$route.params.id,type:0}).then(res=>{
      				console.log(res.data)
      				this.details = res.data.data.novel_info;
		    });
	    },
	    mounted(){
	    	
	    },
	    methods:{
	    	flushCom:function(){
	    		this.$router.go(0);
	    	},
	      	back(){
	        	this.$router.go('-1')
	      	},
	      	viewMoreToggle(){
	      		this.viewMore = !this.viewMore;
	      	},
          	joinBookshelf(){
          		let id = this.$route.params.id;
	            if(this.details.is_collect){
	              this.$axios.post(
	                this.$store.state.url+"cancel_novel?device_sn="+this.$store.state.device,
	                {device_sn:this.$store.state.device,id:id}).then(res=>{
	                  console.log(res.data);
	                  if(res.data.code == 0){
	                    this.$toast({
	                      message: '移除成功',
	                      duration: 1500
	                    });
	                    this.details.is_collect = 0;
	                  }else{
	                    this.$toast({
	                      message: res.data.message,
	                      duration: 1500
	                    });
	                  }
	              });
	            }else{
	              this.$axios.post(
	                this.$store.state.url+"collect_novel?device_sn="+this.$store.state.device,
	                {device_sn:this.$store.state.device,id:id}).then(res=>{
	                  console.log(res.data);
	                  if(res.data.code == 0){
	                    this.$toast({
	                      message: '加入成功',
	                      duration: 1500
	                    });
	                    this.details.is_collect = 1;
	                  }else{
	                    this.$toast({
	                      message: res.data.message,
	                      duration: 1500
	                    });
	                  }
	              });
	            }
	            
	        }
	    }
  	}
</script>
<style lang="scss" scoped>
	.book-details{
		padding:50px 30px 30px;
		.item-l{
			width:180px;
		}
		.item-r{
			width:450px;
			.item-tt{
				font-size:45px;
			}
			.item-desc{
				font-size:26px;
			}
			.item-source{
				color:#b3b3b3;
			}
			.label{
				i{
					margin-right:10px;
					margin-left:0;
				}
			}
		}
	}
	.book-state{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 30px;
		margin:20px 0 50px;
		span{
			color:#999;
			font-size:26px;
			font-weight: bold;
			display: flex;
			align-items: center;
			margin:0 30px;
			&:before{
				content:'';
				width:25px;
				height:25px;
				display: inline-block;
				vertical-align: middle;
				margin-right:15px;
			}
		}
		.txt-num:before{
			background:url(../assets/images/icon/txt-icon1.png) no-repeat 0 0/100% auto;
		}
		.view-num:before{
			background:url(../assets/images/icon/view-icon1.png) no-repeat 0 0/100% auto;
		}
		.fraction:before{
			background:url(../assets/images/icon/star-icon2.png) no-repeat 0 0/100% auto;
		}
	}
	.book-desc{
		font-size:28px;
		line-height:1.8;
		color:#5d646e;
		padding:0 30px;
		margin-bottom:30px;
		height:145px;
		overflow:hidden;
		position: relative;
		span{
			color:#212832;
		}
		&.active{
			height: auto;
			overflow: auto;
		}
		.more-btn{
			background-color:#f4f5f7;
			padding:5px 10px;
			position: absolute;
			right:50px;
			bottom:0;
			border-radius:5px;
			&:after{
				content:'';
				display: block;
				width:20px;
				height:12px;
				background:url(../assets/images/icon/b-icon1.png) no-repeat 0 0/100% auto;
			}
		}
	}
	.book-list{
		position: relative;
		padding:0 60px 0 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:30px;
		&:after{
			left:auto;
			right:30px;
		}
		span,a{
			color:#999;
			display: flex;
			align-items: center;
		}
		.list-icon{
			color:#40464e;
			&:before{
				content:'';
				display: flex;
				width:34px;
				height:34px;
				margin-right:10px;
				background:url(../assets/images/icon/list-icon1.png) no-repeat 0 0/100% auto;
			}
		}
	}

	.recommend{
		margin-top:50px;
		padding:0 30px;
		h3{
			font-size:32px;
			color:#666;
			margin-bottom:30px;
		}
		a{
			display: block;
			margin-bottom:30px;
		}
	}


	.f-book-btn{
		display: flex;
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		line-height:96px;
		z-index:10;
		align-items: center;
		justify-content: space-between;
		box-shadow:0 0 30px rgba(0,0,0,0.1);
		a,span{
			font-size:32px;
			width:50%;
			text-align: center;
			display: block;
		}
		span{
			color:#222;
			background-color:#fff;
		}
		a{
			background-color:#3371ff;
			color:#fff;
		}
	}
</style>
